<template>
<h3>{{title}}</h3>
<div class="pie-chart" ref="usePieRef"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
// defineProps({
//     title:{
//         type: String,
//         require: true,
//         default:()=>{
//             return ''
//         }
//     }
// })
const props = withDefaults(defineProps<{
    title:string,
}>(),{
    title: 'hello',
})
const usePieRef = ref<HTMLDivElement>()
onMounted(()=>{
    var myChart = echarts.init(usePieRef.value as HTMLDivElement);
    var option;

    option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
        }
    ]
    };

    option && myChart.setOption(option);
    window.addEventListener('resize',()=>{
        myChart.resize()
    })

})
</script>
<style lang="scss">
.pie-chart {
    width: 100%;
    height: 90%;
} 
</style>